<template>
	<view class="style-nine">
		<left-aside />
		<view class="right-warp">
			<view v-if="banner9">
				<w-banner :content="banner9.content" :styles="banner9.styles" />
			</view>
			<u-tabs :active-color="themeColor" :current="selectIndex2" :list="twoLists" :bar-width="64"
				@change="changeActive" v-if="refreshTabs" :font-size="26"></u-tabs>
			<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
				<cate-goods v-if="height" :scroll-height="$px2rpx(height)" :fieldShowHide="fieldShowHide"
					:fieldStyles="styles" :content="content" />
			</scroll-view>
		</view>
	</view>
</template>

<script type="text/javascript">
	import leftAside from './left-aside.vue'
	import cateGoods from './goods.vue'
	import category from './category.js'
	export default {
		mixins: [category],
		components: {
			leftAside,
			cateGoods
		},
		props: {
			content: {
				type: Object,
				default: () => {},
			},
			fieldShowHide: {
				type: Object,
				default: () => {},
			},
			styles: {
				type: [Object, Array]
			},
		},
		data() {
			return {}
		},
		methods: {
			changeActive(idx) {
				this.parent.selectIndex2 = idx
			}
		},
		computed: {
			twoLists() {
				const {
					lists,
					selectIndex
				} = this
				return lists[selectIndex]?.sons || []
			},
		}
	};
</script>
<style lang="scss" scoped>
	.style-nine {
		flex: 1;
		min-width: 0;
		min-height: 0;
		/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
		display: flex;
		height: 100%;
		width: 750rpx;

		// 右边
		.right-warp {
			flex: 1;
			min-width: 0;
		}
	}
</style>